import { ref, watchEffect } from 'vue';
type Theme = 'light' | 'dark' | 'OS';
const LOCAL_KEY = '__theme__';
// 先从缓存中读取，如果没有则使用 light
// 响应式数据表示目前的主题方案
const theme = ref<Theme>(localStorage.getItem(LOCAL_KEY) as Theme || 'light');
// localStorage为键值对形式 __theme__:'light'
// 使用媒介查询匹配系统的主题设置
const prefers = matchMedia('(prefers-color-scheme: dark)');

// 跟随系统
function followOS() {
    document.documentElement.dataset.theme = prefers.matches ? 'dark' : 'light';
}

// 监听 theme 的变化，如果变化了就存储到缓存中
watchEffect(() => {
    // 保存到缓存中
    localStorage.setItem(LOCAL_KEY, theme.value);
    if (theme.value === 'OS') {
        // 根据系统的设置选择亮色或暗色主题
        followOS();
        // 只有在用户选择的主题是 OS 时才监听系统设置的变化
        // 监听系统设置的变化
        prefers.addEventListener('change', followOS);
    } else {

        // 通过 document.documentElement.dataset.theme 设置 html 标签的 data-theme 属性
        document.documentElement.dataset.theme = theme.value;
        // 不用监听移除事件
        prefers.removeEventListener('change', followOS);
    }
});

export default function useTheme() {
    return {
        theme,
    };
}
